<template>
    <div>
        <Row type="flex" style="margin-bottom: 10px" justify="start">
            <Button icon="md-add" type="primary" @click="">添加
            </Button>
            <Button icon="md-trash" style="margin-left: 10px"  type="error"
                    @click="batchConfirm">批量删除
            </Button>
        </Row>
        <Row type="flex" justify="center">
            <Table row-key="classId" ref="selection" :loading="loading" border :columns="classColums" :data="classlist"
                   :indent-size=140>
                <template slot-scope="{ row }" slot="action">
                    <Button icon="md-build"  type="primary" size="small"
                            @click="" style="margin-right: 5px">编辑
                    </Button>
                    <Button icon="md-trash" style="margin-right: 5px"
                            type="error" @click=""
                            size="small">删除
                    </Button>
                    <Button icon="md-list-box" type="warning" @click="directory(row)" style="margin-right: 5px"
                            size="small">目录
                    </Button>
                    <Button icon="md-attach" @click="modal.class = row,modal.bindingvideoFlag = true" type="info" size="small">绑定视频</Button>
                </template>
            </Table>
        </Row>
        <directory :modal="modal"></directory>
        <binding-video :modal="modal"></binding-video>
    </div>
</template>

<script>
    import directory from "@c/course/class/directory"
    import bindingVideo from "@c/course/class/bindingVideo"

    export default {
        data() {
            return {
                modal: {
                    directory: false,
                    bindingvideoFlag:false,
                    class: {}
                },
                classlist: [],
                loading: false,
                classMap: {
                    currentPage: 1,
                    pageSize: 1000
                },
                total: 0,
                classColums: [
                    {type: 'selection', width: 60, align: 'center'},
                    {type: 'index', title: "序号", width: 70, align: 'center'},
                    {title: "班级名称", key: "className", align: 'center', sortable: true},
                    {
                        title: "课程", render: (h, param) => {
                            return <label>{param.row.courseDO.courseName}</label>
                        },
                        align: 'center', sortable: true
                    },
                    {
                        title: "教师", render: (h, param) => {
                            return <label>{param.row.teacherDO.teacherName}</label>
                        },
                        align: 'center', sortable: true
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 345,
                        align: 'center'
                    }
                ]
            }
        },
        methods: {
            /**
             * 获取全部班级信息
             */
            getAllclass() {
                this.loading = true
                this.http.post("/class/requestClassList", this.qs.parse(this.classMap)).then(res => {
                    if (res.data) {
                        this.classlist = res.data.list
                    }
                }).finally(res => {
                    this.loading = false
                })
            },
            /**
             * 执行批量删除
             */
            batchConfirm() {

            },
            /**
             * 点击目录管理
             */
            directory(row) {
                this.modal.directory = true
                this.modal.class = row
            }
        },
        created() {
            this.getAllclass()
        },
        components: {directory,bindingVideo}
    }
</script>

<style scoped>

</style>
